<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
<title>Insert title here</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title>Hello, Bootstrap Table!</title>
<!--&lt;!&ndash; 最新 Bootstrap4 核心 CSS 文件 &ndash;&gt;-->
<!--<link  th:href="@{/css/bootstrap.min.css}" rel="stylesheet">-->
<!--&lt;!&ndash; jQuery文件。务必在bootstrap.min.js 之前引入 &ndash;&gt;-->
<!--<script th:src="@{/js/jquery-3.2.1.min.js}"></script>-->
<!--&lt;!&ndash; bootstrap.bundle.min.js 用于弹窗、提示、下拉菜单，包含了 popper.min.js &ndash;&gt;-->
<!--<script	th:src="@{/js/bootstrap.bundle.min.js}"></script>-->
<!--&lt;!&ndash; 最新的 Bootstrap4 核心 JavaScript 文件 &ndash;&gt;-->
<!--<script	th:src="@{/js/bootstrap.min.js}"></script>-->
<!--&lt;!&ndash; DaterangePicker &ndash;&gt;-->
<!--<link rel="stylesheet" type="text/css" media="all" th:href="@{/daterangepicker/daterangepicker.css}" />-->
<!--&lt;!&ndash; BootStrapValidator &ndash;&gt;-->
<!--<link rel="stylesheet" th:href="@{css/bootstrapValidator.min.css}">-->
<!--<script type="text/javascript" th:src="@{js/bootstrapValidator.min.js}"></script>-->
	<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.4.1/css/bootstrap.min.css">

	<!-- jQuery文件。务必在bootstrap.min.js 之前引入 -->
	<script src="https://cdn.staticfile.org/jquery/3.4.1/jquery.min.js"></script>
	<!-- bootstrap.bundle.min.js 用于弹窗、提示、下拉菜单，包含了 popper.min.js -->
	<script	src="https://cdn.staticfile.org/popper.js/1.16.0/umd/popper.min.js"></script>
	<!-- 最新的 Bootstrap4 核心 JavaScript 文件 -->
	<script	src="https://cdn.staticfile.org/twitter-bootstrap/4.4.1/js/bootstrap.min.js"></script>
	<!-- DaterangePicker -->
	<link rel="stylesheet" type="text/css" media="all" href="./daterangepicker/daterangepicker.css" />
	<!-- BootStrapValidator -->
	<link rel="stylesheet" href="https://cdn.bootcss.com/jquery.bootstrapvalidator/0.5.3/css/bootstrapValidator.min.css">
	<script type="text/javascript" src="https://cdn.bootcss.com/jquery.bootstrapvalidator/0.5.3/js/bootstrapValidator.min.js"></script>
	<script src="./js/functions.js"></script>
<script th:src="@{/js/functions.js}"></script>
<script type="text/javascript">
$(function () {
    $("#regForm").bootstrapValidator({
		message: 'This value is not valid',
    	feedbackIcons: {
    		valid: 'glyphicon glyphicon-ok',
    		invalid: 'glyphicon glyphicon-remove',
    		validating: 'glyphicon glyphicon-refresh'
    	},
        fields: {
            username: {
                message: '用户名验证失败',
                validators: {
                    notEmpty: {
                        message: '用户名不能为空'
                    }
                }
            },
            password: {
                message: '密码验证失败',
                validators: {
                    notEmpty: {
                        message: '密码不能为空'
                    }
                }
            },
            password1: {
                message: '密码确认验证失败',
                validators: {
                    notEmpty: {
                        message: '密码确认不能为空'
                    }
                }
            },
            realname: {
                message: '姓名验证失败',
                validators: {
                    notEmpty: {
                        message: '姓名不能为空'
                    }
                }
            }
        }
    });
});

	$(document).ready(function() {
		$("#regForm #username").blur(checkName);
	});

	function checkName() {
		var username = $("#regForm #username").val();
		if (username) {
			$.post("./user/checkUsername", 
				{username : username}, 
				function(data) {
					if (data.result == "yes") {
						$("#result").html("<p class='text-success'>恭喜您，用户名未被注册，请继续！</p>");
					} else {
						$("#result").html("<p class='text-danger'>对不起，用户名已被注册，请更换！</p>");
					}
				});

			/* $.ajax({
				url : "${pageContext.request.contextPath}/user/checkName",
				type : "post", 
				// data表示发送的数据
				data :JSON.stringify({username:username}),
				// 定义发送请求的数据格式为JSON字符串
				contentType : "application/json;charset=UTF-8",
				//定义回调响应的数据格式为JSON字符串,该属性可以省略
				dataType : "json",
				//成功响应的结果
				success : function(data){
					if(data.result){
						$("#result").html("<p class='text-success'>恭喜您，用户名未被注册，请继续！</p>");
					}else{
						$("#result").html("<p class='text-danger'>对不起，用户名已被注册，请更换！</p>");
					}
				}
			}); */
		}
	}
	
</script>
</head>
<body>
	<div class="container-fluid">
		<div class="row">
			<div class="col-md-12">
				<div class="text-center">
					<a type="button" class="btn btn-outline-info" th:href="@{/test/getUserList}">查看所有用户信息</a>
				</div>
			</div>
		</div>
		<hr>

		<div class="row">
			<div class="col-md-10 offset-md-1">
				<form class="form" id="regForm" th:method="post" th:action="@{/test/addUser}">
					<div class="modal-header">
						<h4 class="modal-title">请填写注册信息(改)</h4>
					</div>
					<div class="modal-body">
						<div class="form-group row">
							<div class="col-md-2">
								<label for="username">用户名</label>
							</div>
							<div class="col-md-6">
								<input type="text" id="username" name="username" 
									class="form-control input-sm" placeholder="用户名" required /> <span
									id="result"></span>
							</div>
						</div>
						<div class="form-group row">
							<div class="col-md-2">
								<label for="password">密码</label>
							</div>
							<div class="col-md-6">
								<input type="password" id="password" name="password"
									class="form-control input-sm" placeholder="密码" required />
							</div>
						</div>

						<div class="form-group row">
							<div class="col-md-2">
								<label for="password1">密码确认</label>
							</div>
							<div class="col-md-6">
								<input type="password" id="password1" name="password1"
									class="form-control input-sm" placeholder="密码确认" required />
							</div>
						</div>

						<div class="form-group row">
							<div class="col-md-2">
								<label for="realname">姓名</label>
							</div>
							<div class="col-md-6">
								<input type="text" id="realname" name="realname"
									class="form-control input-sm" placeholder="姓名" />
							</div>
						</div>

						<div class="form-group row">
							<div class="col-md-2">
								<label for="birthdate">出生日期</label>
							</div>
							<div class="col-md-6">
								<input type="text" id="birthdate" name="birthdate"
									class="form-control input-sm">
								<script type="text/javascript"
									src="./daterangepicker/require.js"
									data-main="./daterangepicker/main.js"></script>
							</div>
						</div>

						<div class="form-group row">
							<div class="col-md-2">
								<label for="gender">性别</label>
							</div>
							<div class="col-md-6">
								<div class="form-check form-check-inline">
									<input type="radio" class="form-check-input" name="gender"
										value="1" checked> <label class="form-check-label"
										for="gender">男</label>
								</div>
								<div class="form-check form-check-inline">
									<input type="radio" class="form-check-input" name="gender"
										value="0"> <label class="form-check-label"
										for="gender">女</label>
								</div>
							</div>
						</div>

						<div class="form-group row">
							<div class="col-md-2">
								<label for="interest">爱好</label>
							</div>
							<div class="col-md-6">
								<div class="form-check form-check-inline">
									<input type="checkbox" class="form-check-input" name="interest"	value="旅游"> 
									<label class="form-check-label"	for="interest">旅游</label>
								</div>
								<div class="form-check form-check-inline">
									<input type="checkbox" class="form-check-input" name="interest"	value="登山"> 
									<label class="form-check-label"	for="interest">登山</label>
								</div>
								<div class="form-check form-check-inline">
									<input type="checkbox" class="form-check-input" name="interest"	value="健身"> 
									<label class="form-check-label"	for="interest">健身</label>
								</div>
								<div class="form-check form-check-inline">
									<input type="checkbox" class="form-check-input" name="interest"	value="上网"> 
									<label class="form-check-label"	for="interest">上网</label>
								</div>
								<div class="form-check form-check-inline">
									<input type="checkbox" class="form-check-input" name="interest"	value="游泳"> 
									<label class="form-check-label"	for="interest">游泳</label>
								</div>
							</div>
						</div>

						<div class="form-group row">
							<div class="col-md-2">
								<label for="degree">学历</label>
							</div>
							<div class="col-md-6">
								<select id="degree" name="degree" class="form-control">
									<option value="0" selected>--请选择--</option>
									<option value="1">高中</option>
									<option value="2">专科</option>
									<option value="3">本科</option>
									<option value="4">研究生</option>
								</select>
							</div>
						</div>

						<div class="form-group row">
							<div class="col-md-2">
								<label for="intro">自我介绍</label>
							</div>
							<div class="col-md-6">
								<textarea name="intro" rows="5" cols="20" class="form-control"></textarea>
							</div>
						</div>
					</div>
					<div class="modal-footer">
						<div class="form-group">
							<div class="text-center">
								<button class="btn btn-primary" type="submit">确定</button>
								&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
								<button class="btn btn-secondary" type="reset">重置</button>
							</div>
						</div>
					</div>
				</form>
			</div>
		</div>
	</div>
	<td th:switch="${u.phone}">
		<span th:case="1">高中</span>
		<span th:case="2">大专</span>
		<span th:case="3">本科</span>
		<span th:case="4">研究生</span>
	</td>
</body>
</html>